<template>
  <div id="app">
    <ul class="nav">
      <li>
        <router-link class="list-group-item" active-class="active" to="/mine"
          >我的</router-link
        >
      </li>
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/fighting"
          >战斗</router-link
        >
      </li>
      <li>
        <router-link class="list-group-item" active-class="active" to="/signIn"
          >签到</router-link
        >
      </li>
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/knapsack"
          >背包</router-link
        >
      </li>
      <li>
        <router-link class="list-group-item" active-class="active" to="/task"
          >任务</router-link
        >
      </li>
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/designation"
          >称号</router-link
        >
      </li>
      <li>
        <router-link class="list-group-item" active-class="active" to="/ranking"
          >排行</router-link
        >
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  margin: auto;
  width: 525px;
  height: 800px;
  background-color: #495289;
}
.list-group-item {
  text-decoration: none;
}
</style>
